<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="lib/jQuery.mobile/erstiapp_theme_blue.min.css"/>
        <link rel="stylesheet" href="lib/jQuery.mobile/jquery.mobile.icons.min.css"/>
        <link rel="stylesheet" href="lib/jQuery.mobile/jquery.mobile.structure-1.4.2.min.css"/>
        <script src="lib/jQuery/jquery-2.1.0.min.js"></script>
        <script src="lib/jQuery.mobile/jquery.mobile-1.4.2.min.js"></script>
        <style>
            #content {
                padding: 0;
                position : absolute !important;
                top : 40px !important; 
                right : 0;
                bottom : 40px !important; 
                left : 0 !important;    
            }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>   

        <script>
            $(document).on('pageinit', '#index', function(e, data) {
                navigator.geolocation.getCurrentPosition(function(pos) {
                    var latpos = pos.coords.latitude;
                    var lngpos = pos.coords.longitude;

                    //Für Test mit Hochschulkoordinaten:

                    //latpos = 41.875696;
                    //lngpos = -87.624207;

                    latpos = 49.767841;
                    lngpos = 6.630923;

                    LoadMap(latpos, lngpos);
                });
            });
            function LoadMap(lat, lng) {

                //Customize the map with some styles:
                //Show POI labels and no roadnames
                var styles = [
                    {
                        "featureType": "road",
                        "elementType": "labels.text",
                        "stylers": [
                            {"visibility": "off"}
                        ]
                    }, 
                    /*{
                        "featureType": "all",
                        "elementType": "labels.text",
                        "stylers": [
                            {"visibility": "on"}
                        ]
                    }*/
                ];

                //Set zoomlevel to use it for initial zoom and zoom boundary
                var minZoomLevel = 18;

                // Create LatLng object out of coordinates
                var latlng = new google.maps.LatLng(lat, lng);

                // Create a new StyledMapType object, passing it the array of styles,
                // as well as the name to be displayed on the map type control.
                var styledMap = new google.maps.StyledMapType(styles,
                        {name: "Lageplan"});

                // Create a map object, and include the MapTypeId to add
                // to the map type control.
                var mapOptions = {
                    zoom: minZoomLevel,
                    center: latlng,
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                    }
                };

                //Create the map with specified options in the map-div
                var map = new google.maps.Map(document.getElementById('map_canvas'),
                        mapOptions);

                //Associate the styled map with the MapTypeId and set it to display.
                map.mapTypes.set('map_style', styledMap);
                map.setMapTypeId('map_style');

                //Add a marker for the studens actual position
                var marker = new google.maps.Marker({
                    position: latlng,
                    title: "Dein Standort",
                    animation: google.maps.Animation.DROP
                });
                marker.setMap(map);

                //Load the specified layers from a predefiened file into the map
                var kmlOptions = {
                    suppressInfoWindows: false,
                    preserveViewport: false,
                    map: map
                };
                
                var kmlLayer = new google.maps.KmlLayer('https://fhtriererstiapp.googlecode.com/svn/trunk/FH-Trier.kml', kmlOptions);
                /*var ctaLayer = new google.maps.KmlLayer({
                    url: 'https://fhtriererstiapp.googlecode.com/svn/trunk/FH-Trier.kml'
                });
                ctaLayer.setMap(map);
                */
            }
            ;
        </script>
    </head>
    <body onload="initialize()">>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
            </div>

            <div data-role="content" id="content">
                <div id="map_canvas" style="height:100%"></div>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    First Page
                </h3>
            </div>
        </div>
    </body>
</html>
